<template>
  <!-- v-loading="true" -->
  <div>
    <!-- <pageSearch :searchFormConfig="searchFormConfig" @searchSubmit="searchSubmit" /> -->
    <pageTable :tableData="tableData" :tableInit="params.tableInit" @sizeChange="sizeChange"
      @currentChange="currentChange" @exportFn="exportExcel" v-loading="loading" @pageAdd="openDialogFn('新增')"
      @pageHot="pageHotFn">
      <template #px="{ row }">
        <el-tag>{{ row.px < 10 ? '0' + row.px : row.px }}</el-tag>
      </template>
      <template #list="{ row }">
        {{ filterLinearArray(row.list) }}
      </template>
      <template #operation="{ row }">
        <el-button type="primary" link @click="openDialogFn('编辑', row)">编辑</el-button>
        <el-popconfirm title="确认要删除吗?" @confirm="delData(row.id)">
          <template #reference>
            <el-button type="danger" link>删除</el-button>
          </template>
        </el-popconfirm>
      </template>



    </pageTable>

    <Dialog width="30%" ref="DialogRef" :title="typeText" @submit="submitForm(ruleFormRef)"
      @onclose="resetForm(ruleFormRef)">
      <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="120px" class="demo-ruleForm">
        <el-form-item label="名称" prop="name">
          <el-input v-model="ruleForm.name" autocomplete="off" />
        </el-form-item>
        <!-- <el-form-item label="排序" prop="px">
          <el-input v-model="ruleForm.px" autocomplete="off" />
        </el-form-item> -->
        <el-form-item label="描述">
          <el-input v-model="ruleForm.description" autocomplete="off" />
        </el-form-item>
      </el-form>
    </Dialog>

    <el-dialog v-model="dialogVisible" title="操作" width="30%" :before-close="handleClose">
      <el-select v-model="ActiverFooter" multiple :collapse-tags="true" :collapse-tags-tooltip="true" :teleported="false"
        placeholder="请选择分类" style="width: 100%" :multiple-limit="4">
        <el-option v-for="item in flList" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="tapTrue">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import pageSearch from "@/components/base-ui/page-search";
import pageTable from "@/components/base-ui/page-table";
import Dialog from "@/components/base-ui/dialog";
import Drawer from "@/components/base-ui/drawer";
import { reactive, ref, computed } from 'vue'
import type { FormInstance, FormRules, UploadProps, UploadUserFile } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import draggable from "vuedraggable/src/vuedraggable";
import { clone } from "@pureadmin/utils";
import { getselpage, inserclass, grclass, delinfo, productclassselhopa, productclassinserthopa } from '@/api/classification'
import { searchFormConfig } from "./config/search.config";
import { filetypeinsertfiletype, selfiletypepage, filetypeupdatefiletype, delfiletype } from '@/api/technology.ts'
import { tableInit } from "./config/table.config";
import { usepageTable } from '@/components/base-ui/page-table/usePageTable'
import { message } from "@/utils/message";


const {
  exportExcel,
  tableData,
  getData,
  addData,
  amendData,
  params,
  loading,
  sizeChange,
  currentChange,
  delData,
  searchSubmit,

  DialogRef,
  openDialog,
} = usepageTable({
  tableInit,
  getRes: selfiletypepage,
  addRes: filetypeinsertfiletype,
  delRes: delfiletype,
  updateRes: filetypeupdatefiletype
})

getData()






const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
  name: '',
  px: '',
  description: '',
})


const filterLinearArray = (arr) => {
  let a = arr.map(v => v.name)
  return a.join(',')
}



const validateList = (rule: any, value: any, callback: any) => {
  if (value.length === 0) {
    callback(new Error('请创建二级分类'))
  } else {
    let filterArray = value.filter(v => Boolean(v.name));
    if (filterArray.length === 0) {
      callback(new Error('请正确填写二级分类'))
    } else {
      callback()
    }
  }
}


const rules = reactive<FormRules<typeof ruleForm>>({
  name: [
    { required: true, message: '请填写名称', trigger: 'blur' },
  ],
  // px: [
  //   { required: true, message: '请填写排序号', trigger: 'blur' },
  // ],
})
const typeText = ref('')
const handleID = ref(null)
const openDialogFn = (text, row) => {
  typeText.value = text
  if (row) {
    handleID.value = row.id
    const temporary = clone(row, true);
    Object.keys(ruleForm).forEach((key) => ruleForm[key] = temporary[key])
  }
  openDialog()
}


const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      if (typeText.value === '新增') {
        addData(ruleForm)
      } else {
        let Q = clone(ruleForm, true);
        Q.id = handleID.value
        amendData(Q)
      }
    } else {
      console.log('error submit!')
      return false
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()

  ruleForm.name = ''
  ruleForm.px = ''
  ruleForm.description = ''
  handleID.value = null
  typeText.value = ''
}












const dialogVisible = ref(false)

const handleClose = (done: () => void) => {
  dialogVisible.value = false
}

const ActiverFooter = ref([])

const classselhopa = ref([])
const getproductclassselhopa = () => {
  productclassselhopa().then(res => {
    classselhopa.value = res.result
    ActiverFooter.value = res.result
  })
}
getproductclassselhopa()



const flList = computed(() => {
  let TA = []
  tableData.value.forEach(v => {
    TA.push(...v.list)
  })
  return TA
})

const tapTrue = () => {
  let Q = {
    ids: ActiverFooter.value
  }

  productclassinserthopa(Q).then(res => {
    dialogVisible.value = false
    message("操作成功", {
      type: "success"
    });
    classselhopa.value = ActiverFooter.value
  })
}
const pageHotFn = () => {
  ActiverFooter.value = classselhopa.value
  dialogVisible.value = true
}
</script>

<style scoped></style>
